<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ElasticSearch</title>
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app" class="container" width="1200px">
	<el-container>
		<el-input
				placeholder="请输入内容"
				v-model="sourceUrl"
				size="medium "
				clearable>
		</el-input>
		<br>
		<el-button type="primary" icon="el-icon-search" size="medium " @click="saveUrl()">录入地址</el-button>
	</el-container>
	<el-container>
		<el-input
				placeholder="请输入内容"
				v-model="keyword"
				size="medium "
				clearable>
		</el-input>
		<br>
		<el-button type="primary" icon="el-icon-search" size="medium " @click="searchs()">检索内容</el-button>
	</el-container>
	<el-container v-show="results.length>=0"><p style="font-size: 24px">一共检索到:{{results.length }} 个结果 ,关键字:
		{{keyword}}</p></el-container>
	<el-container>
		<el-collapse v-model="activeNames" @change="handleChange">
			<el-collapse-item v-for="(item,index) in results" :key="index" :title="item.sourceUrl" :name="index">
				<div id="htl">
					{{item.sourceCodes}}
				</div>
			</el-collapse-item>
		</el-collapse>
	</el-container>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!--axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                sourceUrl: '',
                keyword: '',
                results: [],
                activeNames: ['1']
            }
        },
        mounted() {

        },
        methods: {
            saveUrl() {
                axios.get('/es/save', {
                    params: {
                        url: this.sourceUrl
                    }
                }).then(
                    res => {
                        alert("录入成功")
                        this.sourceUrl = "";
                    }
                )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            searchs() {
                axios.get('/es/find/' + this.keyword).then(
                    res => {
                        this.results = res.data;
                        this.activeNames = 0;
                        console.log(this.results)
                    }
                )
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            },
            handleChange(val) {
                console.log(val);
            }
        }
    });
</script>
</body>
</html>